<template>
    <view class="purchaseDetailContainer">
        <!-- 订单我的/商品详订单情 -->
        <cunstom_navigation_bar :tapEvent="goback" :propStyles="propStyles" :title="'待自提'">
        </cunstom_navigation_bar>
        <view class="contentBox">
			<view class="heads">
				<view class="line1">退款成功</view>
				<view class="line2">￥3.65</view>
				<view class="line3">
					平台正在为你退款，将在24小时原路退还至您的支付账户
				</view>
				<view class="line4">
					
					<uv-steps current="0">
						<uv-steps-item title="提交申请" desc="11-14 10:30"></uv-steps-item>
						<uv-steps-item title="平台审核" desc="11-14 10:35"></uv-steps-item>
						<uv-steps-item title="退款成功" desc="11-14 11:40"></uv-steps-item>
					</uv-steps>
				</view>
			</view>
			
            <view class="details">
                <view class="detail">
                    <view class="left">订单编号： </view>
                    <view class="right">256156416541256</view>
                </view>
                <view class="detail">
                    <view class="left">商品名称：  </view>
                    <view class="right">临时有事无法取货-临时有事</view>
                </view>
                <view class="detail">
                    <view class="left">申请金额： </view>
                    <view class="right">用户支付账户</view>
                </view>
                <view class="detail">
                    <view class="left">申请件数： </view>
                    <view class="right">1件</view>
                </view>
                <view class="detail">
                    <view class="left">申请原因：  </view>
                    <view class="right">不想要了（不想要/不喜欢）</view>
                </view>
                <view class="detail">
                    <view class="left">问题描述：  </view>
                    <view class="right">不自提点错了</view>
                </view>
            </view>

			
			<view class="orderList">
				
				<view class="lineLxr">
				    <view class="item1">
				        <view class="line2" >
				        	<image class="item1" src="https://visionmpapi.jiuerjindi.com/upload/mp/myOrder/order2.png"></image>
				            <view class="item2">王先生</view>
				        </view>
				        <view class="line2" >
				        	<image class="item1" src="https://visionmpapi.jiuerjindi.com/upload/mp/myOrder/order1.png"></image>
				            <view class="item2">24小时便利蜂</view>
				        </view>
				    </view>
				</view>
				
				<view class="lineLxrBg"></view>
				
				<view class="line1">
					<image class="item1" src="https://visionmpapi.jiuerjindi.com/upload/mp/index/recommend (1).png">
					<view class="item2" >
						<view class="item2" > 
							<view class="line11" >
								<view class="item111" >海天黄豆酱</view>
								<view class="item112" >实付￥15.8</view>
							</view>
							<view class="line22" >
								<view class="item221" >单价：￥41.99/条</view>
								<view class="item222" >数量：1</view>
							</view>
						</view>
					</view>
				</view>
				<view class="line1">
					<image class="item1" src="https://visionmpapi.jiuerjindi.com/upload/mp/index/recommend (1).png">
					<view class="item2" >
						<view class="item2" > 
							<view class="line11" >
								<view class="item111" >海天黄豆酱</view>
								<view class="item112" >实付￥15.8</view>
							</view>
							<view class="line22" >
								<view class="item221" >单价：￥41.99/条</view>
								<view class="item222" >数量：1</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="linehx"></view>
				
				<view class="line3">
					<view class="item1" >商品金额</view>
					<view class="item2" >共5件</view>
					<view class="right1" >已优惠￥12.30</view>
					<view class="right2" >￥35.66</view>
					
				</view>
					
			</view>
			


        </view>



        <view class="zhanwei"></view>




    </view>
</template>
<script>
    const util = require("@/utils/util.js");
    const api = require("@/utils/api.js");
    var QQMapWX = require('../utils/qqmap-wx-jssdk.js');
    const mapChange = require('../utils/mapChange.js');

    const app = getApp();
    export default {
        data() {
            return {
                selectedIndex: 1,
                statusIndex: 0,
                statusArray: [
                    {
                        value: '',
                        text: '全部'
                    },
                    {
                        value: 1,
                        text: '待付款'
                    },
                    {
                        value: 2,
                        text: '服务中'
                    },
                    {
                        value: 3,
                        text: '已完成'
                    }
                ],
                imgDomain: "",

                labels: [
                    {
                        name: '厨艺很好',
                        selected: true
                    },
                    {
                        name: '特别美味',
                        selected: true
                    },
                    {
                        name: '很好吃',
                        selected: false
                    },
                    {
                        name: '特别谦虚',
                        selected: false
                    }
                ],
                propStyles: {
                    iconSrc: "black",
                    // bgColor: '#FECF01',
                },
				// 订单详情
				orderDetail : null,
				orderStateList: [  {
					title: '提交申请',
					desc: '2018-11-14'
				},{
					title: '平台审核',
					desc: '2018-11-13'
				},{
					title: '退款成功',
					desc: '2018-11-12'
				}]

            };
        },
        computed: {

        },
        methods: {
			getEndPayTime(timestamp){
				
				// 创建一个 Date 对象
				const date = new Date(timestamp*1000 + 15*60 *1000);
				 
				// 提取年、月、日、小时、分、秒
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并补零
				const day = String(date.getDate()).padStart(2, '0'); // 补零
				const hours = String(date.getHours()).padStart(2, '0'); // 补零
				const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零
				const seconds = String(date.getSeconds()).padStart(2, '0'); // 补零
				 
				// 格式化输出
				return `${hours}:${minutes}:${seconds}`;
				
			},
			formatTimestamp(timestamp){
				console.log("->timestamp:"+ timestamp);
				// 创建一个 Date 对象
				const date = new Date(timestamp*1000);
				 
				// 提取年、月、日、小时、分、秒
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并补零
				const day = String(date.getDate()).padStart(2, '0'); // 补零
				const hours = String(date.getHours()).padStart(2, '0'); // 补零
				const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零
				const seconds = String(date.getSeconds()).padStart(2, '0'); // 补零
				 
				// 格式化输出
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
            changeIndex(index) {
                this.statusIndex = index;
            },
           
            deleteFile(e) {
                console.log(" e.tempFilePath:" + e.tempFile.name);
                // this.formData3.educationImgs.map((item, i) => {
                // 	if (item.name == e.tempFile.name) {
                // 		this.formData.educationImgs.splice(i, 1)
                // 	}
                // })
            },
            // 相关证书
            goBack() {

                uni.navigateBack()
            },
            change(index) {
                this.labels[index].selected = !this.labels[index].selected
            },

            jumpUrl(num) {
                if (num == 1) {
                    uni.navigateTo({

                        url: `/page_changeAddress/changeAddress?id=${this.defaultAddress.id}&mallProductId=${this.mallProductId}&skuId=${this.skuId}&quantity=${this.quantity}`
                    })
                } else if (num == 2) {
                    uni.navigateTo({
                        url: `/page_addressEdit/addressEdit?id=null&mallProductId=${this.mallProductId}&skuId=${this.skuId}&quantity=${this.quantity}`
                    })
                } else if (num == 3) {
                    uni.navigateTo({
                        url: `/page_protocol/protocol`,
                    })
                }
            },
            goback() {
                console.log("回去");
                uni.navigateBack();
            },
			// 再来一单
			agianOrder(){
				
			},
			// 评价
			evaluate(){
				uni.navigateTo({
					url: `/page_evaluate/evaluate?id=`+ this.orderDetail.id ,
				}) 
			}

        },
        onReady() { },
        // onShow(){

        //       },
        created() { },
        onShow: function () {

        },
        watch: {

        },


        onLoad: function (option) {

            this.imgDomain = process.env.VUE_APP_BASE_URL;


        },

    };
</script>
<style lang="scss">
    page {
        height: 100vh;
        overflow: auto;
        background: #F4F4F2;
    }
</style>
<style lang="scss" scoped>
    .purchaseDetailContainer {
        background: #f4f4f2;
        box-sizing: border-box;

        /* ::v-deep .companyInfoContainer {
        position: absolute;
        top: 0rpx;
        left: 0rpx;
  
        .navigationBar {
          background: transparent;
        }
      } */
    }

    .contentBox {
        width: 100%;

        .personalInfo {
            width: 750rpx;
            height: 216rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            padding: 40rpx 30rpx 30rpx;
            margin-bottom: 20rpx;

            .addr {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20rpx;

                .icon {
                    width: 50rpx;
                    height: 52rpx;
                }

                .center {
                    width: 550rpx;
                    word-wrap: break-word;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #2E3331;
                    line-height: 45rpx;
                }

                .right {
                    color: rgba(51, 51, 51, 0.6);
                }
            }

            .phone {
                font-weight: 500;
                font-size: 28rpx;
                color: #333333;
            }
        }

		.heads {
            width: 750rpx;
            height: 466rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
            border-radius: 10rpx 10rpx 10rpx 10rpx;
            padding: 0rpx 30rpx;
            padding-top: 20rpx;
            margin-top: 20rpx;
			margin-bottom: 24rpx;
			
			.line1{
				width: 157rpx;
				height: 50rpx;
				font-family: OPPOSans, OPPOSans;
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
				line-height: 50rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-top: 48rpx;
				margin-left: 24rpx;
			}
			.line2{
				width: 164rpx;
				height: 58rpx;
				font-family: OPPOSans, OPPOSans;
				font-weight: 500;
				font-size: 58rpx;
				color: #333333;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-top: 28rpx;
				margin-left: 52rpx;
			}
			.line3{
				width: 661rpx;
				height: 50rpx;
				font-family: OPPOSans, OPPOSans;
				font-weight: 500;
				font-size: 24rpx;
				color: #D93F11;
				line-height: 50rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-top: 28rpx;
			}
			.line4{
				font-family: OPPOSans, OPPOSans;
				font-weight: 500;
				font-size: 24rpx;
				color: #D93F11;
				line-height: 50rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-top: 28rpx;				
			}
			
		}

			.orderList {
			    padding: 26rpx 30rpx 36rpx;
			    width: 750rpx;
			    margin-bottom: 24rpx;
			    background: #FFFFFF;
			    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
			    border-radius: 20rpx 20rpx 20rpx 20rpx;
				  display: flex; /* 启用Flexbox布局 */
				  flex-direction: column; /* 子元素沿水平方向排列（默认为row） */
				  justify-content: space-between; /* 子元素间的间隔均匀分布，首尾元素贴近边缘（可根据需要调整） */
				  align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
				  .lineLxr{
					   width: 100%;
					   display: flex; /* 启用Flexbox布局 */
					   flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
					   justify-content: space-between; /* 子元素间的间隔均匀分布，首尾元素贴近边缘（可根据需要调整） */
					   align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
					   .item1{
					 	  display: flex;
					 	  flex-direction: column;
					 	  align-items: flex-start; /* 改为靠左对齐 */
					 	 
					 	 .line2{
					 		width: 500rpx;
					 	 	height: 50rpx;
					 	 	padding-left: 0rpx;
					 	 	padding-right: 0rpx;
					 	 	margin-top: 0rpx;
					 	 	display: flex; /* 启用Flexbox布局 */
					 	 	flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
					 	 	display: flex; /* 启用Flexbox布局 */
					 	 	align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
					 	 	.item1{
					 	 		width: 36rpx;
					 	 		height: 36rpx;
					 	 		border-radius: 0rpx 0rpx 0rpx 0rpx;
					 	 	}
					 	 	.item2{
					 	 		margin-left: 12rpx;
					 	 		width: 470rpx;
					 	 		height: 40rpx;
					 	 	  	line-height: 40rpx; /* 行高与容器高度一致，实现垂直居中 */
					 	 		font-family: OPPOSans, OPPOSans;
					 	 		font-weight: 400;
					 	 		font-size: 24rpx;
					 	 		color: #333333;
					 	 		line-height: 32rpx;
					 	 		text-align: left;
					 	 		font-style: normal;
					 	 		text-transform: none;
					 	 	  	/* 文字垂直居中的关键 */
					 	 		display: flex; /* 将.item也设为Flex容器 */
					 	 	  	align-items: center; /* 使子元素（在这里是文字）在垂直方向上居中对齐 */
					 	 	}
					 	 } 
					 	  
					   }
					   .item2{
					 	  width: 175rpx;
					 	  height: 172rpx;
					 	  border-radius: 10rpx 10rpx 10rpx 10rpx;
					 	  margin-left: auto;
					 	  margin-right: 28rpx;
					   } 
				  }
				  .lineLxrBg{
					  width: 691rpx;
					  height: 0rpx;
					  border: 2rpx solid rgba(216,216,216,0.6);
				  }
				  
				 .line1{ 
					  display: flex; /* 启用Flexbox布局 */
					  flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
					  justify-content: space-between; /* 子元素间的间隔均匀分布，首尾元素贴近边缘（可根据需要调整） */
					  margin-top: 28rpx;
					  margin-bottom: 28rpx; 
					.item1{
						width: 112rpx;
						height: 120rpx;
						box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0,0,0,0.1);
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						margin-left: 28rpx;
					}
					.item2{
						margin-left: auto;
						margin-right: 0rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						
						.line11{
							width: 550rpx;
							height: 50rpx;
							padding-left: 18rpx;
							padding-right: 0rpx;
							margin-top: 0rpx;
							display: flex; /* 启用Flexbox布局 */
							flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
							display: flex; /* 启用Flexbox布局 */
							align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
							.item111{width: 200rpx;
								height: 32rpx;
								font-family: OPPOSans, OPPOSans;
								font-weight: 500;
								font-size: 28rpx;
								color: rgba(51,51,51,0.8);
								line-height: 32rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								text-align: left;
							}
							.item112{
								width: 120rpx;
								height: 32rpx;
								font-family: OPPOSans, OPPOSans;
								font-weight: 500;
								font-size: 20rpx;
								color: #333333;
								line-height: 32rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								/* 文字垂直居中的关键 */
								display: flex; /* 将.item也设为Flex容器 */
								align-items: center; /* 使子元素（在这里是文字）在垂直方向上居中对齐 */
								margin-left: auto;
								margin-right: 0rpx;
							}
						}
						
						.line22{
							width: 550rpx;
							height: 50rpx;
							padding-left: 18rpx;
							padding-right: 0rpx;
							margin-top: 0rpx;
							display: flex; /* 启用Flexbox布局 */
							flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
							display: flex; /* 启用Flexbox布局 */
							align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
							.item221{
								width: 200rpx;
								height: 32rpx;
								font-family: OPPOSans, OPPOSans;
								font-weight: 400;
								font-size: 24rpx;
								color: rgba(51,51,51,0.6);
								line-height: 32rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								text-align: left;
							}
							.item222{
								width: 120rpx;
								height: 32rpx;
								font-family: OPPOSans, OPPOSans;
								font-weight: 400;
								font-size: 24rpx;
								color: rgba(51,51,51,0.6);
								line-height: 32rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								/* 文字垂直居中的关键 */
								display: flex; /* 将.item也设为Flex容器 */
								align-items: center; /* 使子元素（在这里是文字）在垂直方向上居中对齐 */
								margin-left: auto;
								margin-right: 0rpx;
							}
						}
					
					}
				}
				.linehx{
					width: 690rpx;
					height: 0rpx;
					border: 2rpx solid rgba(51,51,51,0.1);
				}
				.line3{
					width: 100%;
					margin-top: 28rpx;
					display: flex; /* 启用Flexbox布局 */
					flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
					justify-content: space-between; /* 子元素间的间隔均匀分布，首尾元素贴近边缘（可根据需要调整） */	
					align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */			
					.item1{
						width: 96rpx;
						height: 24rpx;
						font-family: OPPOSans, OPPOSans;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						line-height: 24rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}	
					.item2{
						width: 44rpx;
						height: 24rpx;
						font-family: OPPOSans, OPPOSans;
						font-weight: 500;
						font-size: 16rpx;
						color: rgba(51,51,51,0.6);
						line-height: 24rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					.right1{
						margin-left: auto;
						margin-right: 0rpx;		
						width: 132rpx;
						height: 24rpx;
						font-family: OPPOSans, OPPOSans;
						font-weight: 400;
						font-size: 20rpx;
						color: #D93F11;
						line-height: 24rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;										
					}
					.right2{
						margin-left: auto;
						margin-right: 0rpx;	
						width: 106rpx;
						height: 28rpx;
						font-family: OPPOSans, OPPOSans;
						font-weight: 500;
						font-size: 20rpx;
						color: #333333;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;											
					}
									
				}
				
			}

        .details {
            width: 750rpx;
            height: 426rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
            border-radius: 10rpx 10rpx 10rpx 10rpx;
            padding: 0rpx 30rpx;
            padding-top: 50rpx;
            margin-top: 20rpx;
			margin-bottom: 24rpx;

            .detail {
                display: flex;
                justify-content: space-between;
                margin-bottom: 30rpx;

                .left {
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #333333;
                }

                .right {
                    font-weight: 500;
                    font-size: 20rpx;
                    color: #333333;

                    .grey {
                        font-weight: 400;
                        font-size: 20rpx;
                        color: rgba(51, 51, 51, 0.8);
                    }
                    .seperate{
                        margin: 0rpx 18rpx;
                    }
                }
            }
        }
    }
    .zhanwei{
        width: 750rpx;
        height: 146rpx;
    }
</style>